<script setup>
  import { onBeforeRouteLeave, useRoute } from 'vue-router';
  import { watch, reactive } from 'vue';
  import { GetEvaluateSynthensize } from '@/api/exdoctor/mixAppraise'
  const appRoute = useRoute()

  const pageData = reactive({
    data: []
  })

  const getOverview = () => {
    const params = {
      fn: appRoute.query.fn,
      start: appRoute.query.start,
      end: appRoute.query.end
    }
    GetEvaluateSynthensize(params.fn, params.start, params.end).then((res) => {
      // console.log(res)
      pageData.data = res.data.synthesize
    })
  }

  const watchRouteTs = watch(() => appRoute.query._ts, () => {
    getOverview()
  }, { immediate: true})

  onBeforeRouteLeave(() => {
    watchRouteTs()
  })
</script>
<template>
  <div class="view-container">
    <div class="title-box">
      <div class="title">交易综合评价</div>
      <div class="sub-title">- 交易综合分析 -</div>
    </div>
    <div class="synthensize-box">
      <div v-for="(row, index) in pageData.data" :key="row.key" class="syn-item">
        <div class="label">{{ index + 1}}、{{ row.name }}</div>
        <div class="text">{{ row.text }}</div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .view-container {
    padding: 0 20px 10px 20px;
    .title-box {
      // text-align: left;
      margin: 10px 0;
      line-height: 30px;
      .title {
        font-size: 22px;
        font-weight: 600;
        .sub-title {
          color: #444;
          font-size: 15px;
        }
      }
    }
    .synthensize-box {
      .syn-item {
        margin-bottom: 10px;
        .label {
          background:linear-gradient(to right, #e7edfa, #fff);
          line-height: 26px;
          padding: 0 10px;
          color: #c56868;
          border-radius: 4px;
        }
        .text {
          text-indent: 2em;
          line-height: 30px;
          padding: 10px 0;
        }
      }
    }
  }
</style>